<template>
  <el-dialog title="房租信息" :model-value="visible" width="550px" :fullscreen="mobile" @close="handleCancel">
    <el-form :model="rentForm" ref="rentFormRef" :rules="rentFormRules">
      <el-form-item label="租金" required>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="rentCollectCycle" label-width="0">
              <el-select v-model="rentForm.rentCollectCycle">
                <el-option label="月租金" :value="1"></el-option>
                <el-option label="日租金" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="rent" label-width="0">
              <el-input v-model="rentForm.rent" placeholder="请输入租金" @input="handleRentChange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="押金" prop="deposit">
        <el-input v-model="rentForm.deposit" placeholder="请输入押金"></el-input>
      </el-form-item>
      <el-form-item label="支付时间" prop="rentType" required>
        <el-select v-model="rentForm.rentType" placeholder="请选择支付时间">
          <el-option label="每1月" :value="1"></el-option>
          <el-option label="每2月" :value="2"></el-option>
          <el-option label="每3月" :value="3"></el-option>
          <el-option label="每4月" :value="4"></el-option>
          <el-option label="每半年" :value="5"></el-option>
          <el-option label="每一年" :value="6"></el-option>
          <el-option label="一次性" :value="7"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="rentRangeDl">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean
  },
  type: {
    type: String
  },
  form: {
    type: Object,
    default: () => {}
  }
})

const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  rentForm: {
    rentCollectCycle: undefined,
    rent: undefined,
    deposit: undefined,
    rentType: undefined
  },
  rentFormRules: {
    rent: [
      { required: true, message: "请输入租金", trigger: "blur" },
      { pattern: /^(0|([1-9][0-9]*))?(.\d{1,2})?$/, message: "请输入正确的租金", trigger: ["blur", "change"] }
    ],
    deposit: [
      { required: true, message: "请输入押金", trigger: "blur" },
      { pattern: /^(0|([1-9][0-9]*))?(.\d{1,2})?$/, message: "请输入正确的押金", trigger: ["blur", "change"] }
    ],
  },
})
const { rentForm, rentFormRules } = toRefs(data)
watch(() => props.visible, (value) => {
  if (value) {
    proxy.resetForm('rentFormRef')
    if (props.type === 'edit') {
      rentForm.value = { ...props.form }
    }
  }
})

// 租金发生变化
function handleRentChange(value) {
  rentForm.value.deposit = value
}

function handleCancel() {
  emit('cancel')
}
function handleOk() {
  proxy.$refs['rentFormRef'].validate(valid => {
    if (valid) {
      emit('ok', rentForm.value)
    }
  })
}
</script>
